<template>
  
  <div class="cplb">
     <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>推荐列表</el-breadcrumb-item>
    </el-breadcrumb>

     <el-table v-loading='loading' :data="tableData" border stripe style="width: 100%">
    <el-table-column label="序号" type='index'/>
     <el-table-column label="图片" >
        <template #default="scope">
          <img :src="scope.row.img1" alt="">
        </template>
     </el-table-column>
      <el-table-column label="名称" prop='proname' width="200"/>
      <el-table-column label="品牌" prop='brand'/>
      <el-table-column label="分类" prop='category'/>
      <el-table-column label="原价" prop='originprice'/>
      <el-table-column label="折扣" prop='discount'/>
      <el-table-column label="销量" prop='sales'/>
     <el-table-column label="是否推荐">
         <template #default="scope">
           <el-switch v-model="scope.row.isrecommend" @click="tuijian(scope.row.proid,scope.row.isrecommend)"/>
        </template>
    </el-table-column>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatecp()" type="danger">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
import {proshowdata,proupdateFlag} from '@/api/index'

var tableData=ref([])
var loading=ref(false)
var render=async()=>{
   loading.value=true
  var ok= await proshowdata({type:'isrecommend',flag:1})
  console.log(ok);
  ok.data.data.forEach(item => {
      item.isrecommend=Boolean(item.isrecommend)
  });
  tableData.value=ok.data.data
  loading.value=false
}
onMounted(()=>{
 render()
})
var tuijian= async (proid,flag)=>{
    var ok=await proupdateFlag({proid,type:'isrecommend',flag})
    console.log(ok);
    ElNotification({
          title:'状态通知',
          message:'状态修改成功',
          type:'success',
          duration: 1500
        })
}
</script>

<style scoped lang='scss'>
.mianbao{
  margin-bottom: 30px;
}
.cplb{
  img{
     width: 80%;
    height: 50px;
    object-fit: cover;
  }
}
</style>